import React, { Component } from 'react';
import styles from './style.scss';
import PropTypes from 'prop-types';
import { noop } from '@utils';

class Radio extends Component {
    static propTypes = {
        name: PropTypes.string,
        disabled: PropTypes.bool,
        defaultChecked: PropTypes.bool,
        checked: PropTypes.bool,
        value: PropTypes.any.isRequired,
        onChange: PropTypes.func
    };

    static defaultProps = {
        name: 'radioGroup',
        disabled: false,
        defaultChecked: false,
        checked: false,
        onChange: noop
    };

    render() {
        const { name, disabled, defaultChecked, checked, value, onChange, children , ...others} = this.props;
        let element;
        let className = `${styles.radioWrapper}`;
        disabled && (className += ` ${styles.disabled}`);
        if (defaultChecked) {
            element = (
                <label className={className} {...others}>
                    <span className={styles.radioContent}>
                        <input 
                            type="radio" 
                            name={name} 
                            value={value} 
                            disabled={disabled} 
                            onChange={onChange} 
                            defaultChecked
                        />
                        <span className={styles.radioInner}></span>
                    </span><span>{children}</span>
                </label>
            )
        } else {
            element = (
                <label className={className} {...others}>
                    <span className={styles.radioContent}>
                        <input 
                            type="radio" 
                            name={name} 
                            value={value} 
                            disabled={disabled} 
                            onChange={onChange} 
                            checked={checked}
                        />
                        <span className={styles.radioInner}></span>
                    </span><span>{children}</span>
                </label>
            )
        }
        return element;
    }
}

export default Radio;